<template>
  <el-dialog
    :title="$t('销毁数量')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="1000px"
    :before-close="cancel"
  >
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" prop="time">
        <el-row>
          <!-- 时间选择 -->
          <el-form-item>
            <el-date-picker
              @change="getList"
              :clearable="false"
              v-model="queryParams.time"
              type="daterange"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-row>
      </el-form>

      <el-table :height="calTableHeight() - 150" v-loading="loading" :data="tableData" row-key="menuId">
        <el-table-column show-overflow-tooltip :label="$t('sku编号')" align="center" prop="skuNo" />
        <el-table-column show-overflow-tooltip :label="$t('类型')" align="center" prop="type">
          <template slot-scope="{ row }">
            <span :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('业务id')" align="center" prop="businessId" />
        <el-table-column show-overflow-tooltip :label="$t('出入数量')" align="center" prop="outNum" />
        <el-table-column show-overflow-tooltip label="操作后库存" align="center" prop="afterNum" />
        <el-table-column show-overflow-tooltip :label="$t('操作时间')" align="center" prop="createTime" />
      </el-table>
      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>

<script>
import { getDestroyList } from '@/api/statistics/skuSalePlatform'
import { useDict } from '@/utils/useDict'
import { checkPermi } from '@/utils/permission'

export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showSearch: true,
      /**出入库记录类型 */
      out_warehouse_type_list: [],
      title: '',
      tableData: [],
      showDialog: false,
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        skuId: '',
        time: [],
      },
    }
  },
  created() {
    useDict('out_warehouse_type').then(({ out_warehouse_type }) => {
      this.out_warehouse_type_list = out_warehouse_type
    })
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.queryParams.time = this.formData.time
        this.queryParams.skuId = this.formData.skuId
        this.getList()
      }
    },
  },

  methods: {
    cancel() {
      this.$emit('update:show', false)
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.recordsType = null
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
    hasPermission(str) {
      return checkPermi([str])
    },
    handleType(type) {
      const index = this.out_warehouse_type_list.findIndex((i) => i.dictValue == type)
      return this.out_warehouse_type_list[index]?.dictLabel
    },
    handleOpen({ title, skuId }) {
      this.title = title
      this.queryParams.skuId = skuId
      this.getList()
      this.showDialog = true
    },

    /** 查询菜单列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }

      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getDestroyList(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
